<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>stagemonitor widget</title>
	<link rel="stylesheet" href="/stagemonitor/static/bootstrap/bootstrap.min.css">
	<link rel="stylesheet" href="/stagemonitor/static/bootstrap/bootstrap-theme.min.css">
	<link rel="stylesheet" href="/stagemonitor/static/jquery-treetable/jquery.treetable.css">
	<link rel="stylesheet" href="/stagemonitor/static/jquery-treetable/jquery.treetable.theme.bootstrap.css">
	<link rel="stylesheet" href="/stagemonitor/static/datatables/jquery.dataTables.min.css">
	<link rel="stylesheet" href="/stagemonitor/static/datatables/dataTables.bootstrap.css">
	<link rel="stylesheet" href="/stagemonitor/static/typeahead.css">
	<link rel="stylesheet" href="/stagemonitor/static/animate/animate.min.css">
	<link rel="stylesheet" href="/stagemonitor/static/stagemonitor-widget.css">
	<script src="/stagemonitor/static/jquery.1.11.1.min.js"></script>
	<script src="/stagemonitor/static/jquery.serialize-object.min.js"></script>
	<script src="/stagemonitor/static/bootstrap/bootstrap.min.js"></script>
	<script src="/stagemonitor/static/bootstrap/bootstrap-growl.min.js"></script>
	<script src="/stagemonitor/static/parsley.min.js"></script>
	<script src="/stagemonitor/static/datatables/jquery.dataTables.min.js"></script>
	<script src="/stagemonitor/static/datatables/dataTables.bootstrap.js"></script>
	<script src="/stagemonitor/static/handlebars.min.js"></script>
	<script src="/stagemonitor/static/handlebars-helpers.js"></script>
	<script src="/stagemonitor/static/jquery-treetable/jquery.treetable.js"></script>
	<script src="/stagemonitor/static/typeahead.jquery.min.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/utils.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/stagemonitor-widget.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/tabs/config-tab.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/tabs/call-tree-tab.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/tabs/request-tab.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/tabs/widget-settings-tab.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/tabs/ajax-requests.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/flot/jquery.flot.min.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/flot/jquery.flot.resize.min.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/flot/jquery.flot.time.min.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/flot/jquery.flot.tooltip.min.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/flot/jquery.flot.stack.original.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/tabs/metrics-tab.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/tabs/metrics/graphRenderer.js"></script>
	<script type="text/javascript" src="/stagemonitor/static/tabs/metrics/tableRenderer.js"></script>
</head>
<body>
<div class="container-fluid">
	<div class="position-relative">
		<h1 class="head">
			<a href='http://www.stagemonitor.org/' target="_blank">
				<img class="stagemonitor-banner" src="/stagemonitor/static/stagemonitor-banner.png"/>
			</a>
			<button class="close" id="stagemonitor-modal-close"><span>&times;</span></button>
		</h1>

		<ul id="tab-list" class="nav nav-tabs" role="tablist">
			<li id="call-stack-tab" class="active">
				<a href="#stagemonitor-home" role="tab" data-toggle="tab" class="tip" data-placement="bottom"
				   title="View method call tree of the current request including SQL statements">
					Call Tree
				</a>
			</li>
			<li id="request-tab">
				<a href="#stagemonitor-request" role="tab" data-toggle="tab" class="tip" data-placement="bottom"
				   title="View request trace including server and DB execution times">
					Request
				</a>
			</li>
			<li id="widget-settings-tab">
				<a href="#widget-settings" role="tab" data-toggle="tab" class="tip" data-placement="bottom"
				   title="Edit notification settings and call tree highlighting">
					Widget Settings
				</a>
			</li>
			<li id="config-tab">
				<a href="#stagemonitor-configuration" role="tab" data-toggle="tab" class="tip" data-placement="bottom"
				   title="Dynamically change or reload configuration.">
					Configuration
				</a>
			</li>
			<li id="ajax-tab">
				<a href="#stagemonitor-ajax" id="ajax-tab-link" role="tab" data-toggle="tab" class="tip hidden"
				   data-placement="bottom"
				   title="Select a ajax request to analyze its call tree and request trace.">
					Ajax Requests <span id="ajax-badge" class="badge"></span>
				</a>
			</li>
			<li id="metrics-tab">
				<a href="#stagemonitor-metrics" role="tab" data-toggle="tab" class="tip" data-placement="bottom"
				   title="Show metrics of the application.">
					Metrics
				</a>
			</li>
		</ul>
	</div>

	<div id="tab-content" class="tab-content">
		<div class="tab-pane active" id="stagemonitor-home">
			<!--tabs/call-tree-tab.html-->
			<span id="wait" class="glyphicon glyphicon-hourglass fade-in"></span>
		</div>


		<div class="tab-pane" id="stagemonitor-request">
			<!--tabs/request-tab.html-->
		</div>

		<div class="tab-pane" id="widget-settings">
			<form class="form-horizontal" role="form">
				<fieldset>
					<legend>Call Tree</legend>
					<div class="form-group">
						<label class="col-sm-3 control-label">Highlight and expand method calls taking longer
							than </label>

						<div class="col-sm-2">
							<div class="input-group">
								<input data-widget-settings-key="widget-settings-execution-threshold-percent"
									   data-widget-settings-default-value="5" class="form-control">

								<div class="input-group-btn-vertical stagemonitor-spinner">
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-up"></i>
									</button>
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-down"></i>
									</button>
								</div>
								<span class="input-group-addon">%</span>
							</div>
						</div>
					</div>
				</fieldset>
				<fieldset>
					<legend>Notifications</legend>

					<div class="form-group">
						<label class="col-sm-3 control-label">Notify if request took longer than </label>

						<div class="col-sm-2">
							<div class="input-group">
								<input data-widget-settings-key="widget-settings-execution-threshold-milliseconds"
									   data-widget-settings-default-value="2000" class="form-control">

								<div class="input-group-btn-vertical stagemonitor-spinner">
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-up"></i>
									</button>
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-down"></i>
									</button>
								</div>
								<span class="input-group-addon">ms</span>
							</div>
						</div>
					</div>

					<div class="form-group">
						<label class="col-sm-3 control-label">Count of SQL-queries after which you will be
							notified</label>

						<div class="col-sm-2">
							<div class="input-group">
								<input data-widget-settings-key="widget-settings-db-count-threshold"
									   data-widget-settings-default-value="20" class="form-control">

								<div class="input-group-btn-vertical stagemonitor-spinner rounded">
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-up"></i>
									</button>
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-down"></i>
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">Notify on error</label>

						<div class="col-sm-2">
							<input data-widget-settings-key="widget-settings-notify-on-error"
								   data-widget-settings-default-value="false" type="checkbox" class="checkbox">
						</div>
					</div>
				</fieldset>
				<fieldset>
					<legend>Metrics Tab</legend>
					<div class="form-group">
						<label class="col-sm-3 control-label">Refresh metrics interval</label>

						<div class="col-sm-2">
							<div class="input-group">
								<input data-min="1" data-max="30" data-widget-settings-key="widget-settings-metrics-refresh"
									   data-widget-settings-default-value="2" class="form-control">

								<div class="input-group-btn-vertical stagemonitor-spinner">
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-up"></i>
									</button>
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-down"></i>
									</button>
								</div>
								<span class="input-group-addon">sec</span>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-3 control-label">Keep metrics history</label>

						<div class="col-sm-2">
							<div class="input-group">
								<input data-min="1" data-max="60" data-widget-settings-key="widget-settings-metrics-history"
									   data-widget-settings-default-value="5" class="form-control">

								<div class="input-group-btn-vertical stagemonitor-spinner">
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-up"></i>
									</button>
									<button class="btn btn-default"><i class="glyphicon glyphicon-chevron-down"></i>
									</button>
								</div>
								<span class="input-group-addon">min</span>
							</div>
						</div>
					</div>
				</fieldset>
				<div class="form-group">
					<div class="col-sm-offset-3 col-sm-6">
						<button type="submit" class="btn btn-primary" id="widget-settings-save">Save</button>
					</div>
				</div>
			</form>
		</div>

		<div class="tab-pane" id="stagemonitor-configuration">
			<!--tabs/config-tab.html-->
		</div>

		<div class="tab-pane" id="stagemonitor-ajax">
			<table id="ajax-table" class="display" cellspacing="0" width="100%">
				<thead>
				<tr>
					<th>Timestamp</th>
					<th>Name</th>
					<th>URL</th>
					<th>Execution Time</th>
					<th>Status</th>
					<th>Method</th>
				</tr>
				</thead>
			</table>
		</div>

		<div class="tab-pane" id="stagemonitor-metrics">

			<div>
				<ul class="nav nav-pills nav-stacked sidebar" id="side-menu">
				</ul>
			</div>

			<div id="metric-plugins" class="page-wrapper">
			</div>
		</div>

	</div>
</div>
</body>
</html>
